<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8">
<title>云监控平台</title>

	<link rel="stylesheet" href="/css/vendor/common.css" type="text/css">
	<link rel="stylesheet" href="/css/vendor/cmp-controls.css" type="text/css">
	<link href="/css/vendor/main.less" rel="stylesheet/less" type="text/css">
	<script src="/js/less.min.js"></script>
</head>

<body>
<!-- 右侧内容区(除左侧菜单以外的区域) -->
<div id="right-content-container">
	<div class="top-status-bar">
		<img id="top-status-bar-expand-btn" class="button" onClick="mainM.clickMenuExpand()">
		<img class="logout button" src="/images/main/top_st_bar_logout.png">
		<div class="name-wrap">
			<div class="button" onClick="mainM.clickShowUserBriefInfo(event)">
				<img class="toggle" src="/images/main/top_st_bar_info_toggle.png">
				<label class="name font-bold">枪炮与玫瑰</label>
			</div>
			<div id="user-info-brief-wrap" onClick="mainM.clickNotRepond(event)">
				<table cellpadding="0" cellspacing="0">
					<tr><th>用户名:</th></tr>
					<tr><td>枪炮与玫瑰</td></tr>
					<tr><td class="blank"></td></tr>
					<tr><th>手机号:</th></tr>
					<tr><td>153777712345</td></tr>
					<tr><td class="blank"></td></tr>
					<tr><th>邮 箱:</th></tr>
					<tr><td>feima@feimarobotics.commmm</td></tr>
					<tr><td class="blank"></td></tr>
					<tr><th>系统角色:</th></tr>
					<tr><td>管理员</td></tr>
				</table>
				<div class="detail-btn button" onClick="mainM.clickShowUserDetailInfo()">详细信息</div>
			</div>
		</div>
		<img class="user-icon button" onClick="mainM.clickShowUserBriefInfo(event)" src="/images/main/main_user_icon.png">
		<div class="msg-wrap" id="top-status-bar-msg-wrap">
			<div class="button" onClick="clickTopBarMsgMenuToggle(event)">
				<img class="msg" src="/images/main/top_st_bar_msg.png">
				<span class="sup">300</span>
			</div>
			<!--  此处动态加入通知消息菜单  -->
		</div>
		<div class="notice-wrap button" onClick="mainM.feedbackBox.show()">
			<img class="notice" src="/images/main/top_st_bar_bug.png">
		</div>
		<div class="search-wrap">
			<input type="text">
			<img class="search button" src="/images/main/top_st_bar_search.png">
		</div>
	</div>

	<div class="top-nav-bar">
		<img class="home button" src="/images/main/top_nav_bar_home.png">
		<table>
			<tr>
				<td class="button"><span>/</span>飞行管理</td>
				<td class="button"><span>/</span>数据管理</td>
			</tr>
		</table>
	</div>

	<div class="content-container">
		<iframe width="100%" height="100%" frameborder="0" src="group-select.html"></iframe>
	</div>
</div> <!-- #right-content-container -->

<!-- 左侧菜单区域 -->
<div id="main-menu-wrap" class="full">
	<div class="logo-wrap">
		<img class="logo" src="/images/main/main_logo.png">
		<label class="title font-medium">云监控平台</label>
	</div>

	<img id="menu-user-icon" src="/images/main/main_user_icon.png">
	<p id="menu-user-name" class="font-medium">深圳飞马机器人</p>
	<p id="menu-user-introduce">创新中国 以人为本</p>
	<p id="menu-user-state"><span class="state-sign online"></span>Online</p>

	<div class="menu-wrap">
		<table class="menu" cellpadding="0" cellspacing="0">
			<script>
				var menuList = [
					{m1: {name:"云监控",
						icon:"main_menu_cloud_monitor",
						m2: ["总飞机数量", "总飞行时间", "总飞机数量", "总飞行时间"]}},
					{m1: {name:"空域管理",
						icon:"main_menu_airspace",
						m2: ["总飞机数量", "总飞行时间", "总飞机数量"]}},
					{m1: {name:"用户管理",
						icon:"main_menu_user_manager",
						m2: ["总飞机数量", "总飞行时间"]}},
					{m1: {name:"飞机管理",
						icon:"main_menu_drone_manager",
						m2: ["总飞机数量", "总飞行时间", "总飞机数量", "总飞行时间"]}},
					{m1: {name:"子系统管理",
						icon:"main_menu_sub_system",
						m2: ["总飞机数量", "总飞行时间", "总飞机数量", "总飞行时间"]}},
					{m1: {name:"消息推送",
						icon:"main_menu_push_msg",
						m2: ["总飞机数量", "总飞行时间", "总飞机数量", "总飞行时间"]}},
					{m1: {name:"系统设置",
						icon:"main_menu_system_setting",
						m2: ["总飞机数量", "总飞行时间", "总飞机数量", "总飞行时间"]}},];
				var menuStr = "";
				for (var i = 0; i < menuList.length; i++) {
					var menu = menuList[i];
					var m2Str = "";
					for (var j = 0; j < menu.m1.m2.length; j++) {
						m2Str += "<li>"+ menu.m1.m2[j] +"<span style='background-color: #5bbef4;'></span></li>";
					}

					menuStr += " \
							<tr class='m1'> \
								<td><img class='full' src='/images/main/"+ menu.m1.icon +".png'><img class='simple' src='/images/main/"+ menu.m1.icon +"_big.png'><span class='name'>"+ menu.m1.name +"</span></td> \
							</tr> \
							<tr class='m2'><td> \
								<ul> " + m2Str + " </ul> \
							</td></tr> \
							<tr class='blank'></tr>";
				}
				document.write(menuStr);
			</script>
		</table>
	</div> <!-- .menu-wrap -->

	<div class="about-wrap full">
		<table>
			<tr>
				<td>使用说明</td>
				<td>系统支持</td>
				<td>常见问题</td>
			</tr>
			<tr class="copy-right">
				<td colspan="3">2017 Copyright Desgin by <span class="hightlight">Feimarobotics</span></td>
			</tr>
		</table>
	</div>
	<div class="about-wrap simple">
		<table cellpadding="0" cellspacing="0">
			<tr><td>2017</td></tr>
			<tr><td>Copyright</td></tr>
			<tr><td><span class="hightlight">Feimarobotics</span></td></tr>
		</table>
	</div>
</div> <!-- #main-menu-wrap -->

</body>

<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/js/vendor/common.js"></script>
<script src="/js/vendor/cmp-controls.js"></script>
<script src="/js/vendor/main.js"></script>

<script>
//    disconnectedView.show(function() {
//        alert("点击了重新连接");
//        disconnectedView.remove();
//    });
    
	/* 测试代码 */
//	mainM.userInfoNeedUpdateCallback = function() {
//		console.log("用户信息已修改，请更新菜单栏的用户信息");
//	}
//
//	/* 右上角通知栏 */ 
//	mainM.showNoticeMsg({
//		title: "图标设计，远不止好看这么简单",
//		content: "图表设计的过程实则是将数据进行可视化表达的过程，其研究的对象源头是数据，然而，数据本身价值不大，所谓的数据往往是由一些看起来有用和没用的数字组成，用户很难从这些散乱的数字中发现有价值的信息，so，如果把这些数字从商业目的、用户动机进行有机组合、关联或定义就使得数据变得有意义（价值），图表只是最终的很难从这些散乱的数字中发现有价很难从这些散乱的数字中发现有价",
//		// duration: 6,  // 如果不设置，默认是3s消失
//		clickDetail: function() {
//			console.log("点击了详情");
//		}
//	});
//	// 主动移除通知
//	// mainM.removeNoticeMsg();
//
//
//	// 显示通知消息详情
//	mainM.showNoticeDetail("/notice-detail.html");
//
//	/* 显示通知消息菜单 */
//	function clickTopBarMsgMenuToggle(event) {
//		event.stopPropagation();
//		if ($("#top-bar-msg-menu").length > 0) {
//			$("#top-bar-msg-menu").fadeOut(200, function() {
//				$(this).remove();
//			});
//		} else {
//			$("#top-status-bar-msg-wrap").append("<div id='top-bar-msg-menu' onClick='mainM.clickNotRepond(event)'> \
//                        <div class='title-wrap'> \
//                            <h3>您有<span class='unread-cnt'>3</span>条信息未读</h3> \
//                            <p class='read-all button'>全部已读</p> \
//                        </div> \
//                        <div class='msg-menu'> \
//                            <table cellpadding='0' cellspacing='0'> \
//                                <tr><td> \
//                                    <h3>缓解用户的忧虑缓解用户的忧虑缓解用户</h3> \
//                                    <p class='describe'>用户186844552申请空域起飞用户186844552申请空域起飞</p> \
//                                    <p class='time'>3分钟前</p> \
//                                    <p class='unread-tag'>未读</p> \
//                                    <div class='sep-line'></div> \
//                                </td></tr> \
//                                <tr><td> \
//                                    <h3>缓解用户的忧虑缓解用户的忧虑缓解用户</h3> \
//                                    <p class='describe'>用户186844552申请空域起飞用户186844552申请空域起飞</p> \
//                                    <p class='time'>3分钟前</p> \
//                                    <p class='unread-tag'>未读</p> \
//                                    <div class='sep-line'></div> \
//                                </td></tr> \
//                                <tr><td class='more button'>显示更多</td></tr> \
//                            </table> \
//                        </div> \
//                    </div>");
//			$("#top-bar-msg-menu").fadeIn(200);
//		}
//	}


</script>

</html>






